Feat / WCAG validation per page using axe-playwright
#192
Conversation
langemike
temporarily deployed
to
Deployment Previews
GitHub Actions
Inactive
langemike
changed the title
axe-playwright (POC)
langemike
requested review from
ChristiaanScheermeijer,
MelissaDTH and
royschut
langemike
changed the title
axe-playwright (POC)axe-playwright
langemike
temporarily deployed
to
Deployment Previews
GitHub Actions
Inactive
packages/ui-react/src/components/VideoListItem/VideoListItem.tsx
Outdated
Show resolved
Hide resolved
MelissaDTH
temporarily deployed
to
Deployment Previews
GitHub Actions
Inactive
MelissaDTH
temporarily deployed
to
Deployment Previews
GitHub Actions
Inactive
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
MelissaDTH
temporarily deployed
to
Deployment Previews
GitHub Actions
Inactive
MelissaDTH
temporarily deployed
to
Deployment Previews
GitHub Actions
Inactive
MelissaDTH
temporarily deployed
to
Deployment Previews
GitHub Actions
Inactive
|
|
||
| Scenario('WCAG compliant - Choose Offer Modal', async ({ I }) => { | ||
| I.useConfig(testConfigs.svod); | ||
| paidLoginContext = await I.registerOrLogin(paidLoginContext); |
There was a problem hiding this comment.
This seems like a weird convention. I also see this is not your idea, but it is used like this in other tests. Is this really needed to make it work? I have the assumption it could be left empty and still work.
Also, I would move the let within the scope of this scenario.
| Scenario('WCAG compliant - Player Page', async ({ I }) => { | ||
| I.useConfig(testConfigs.basicNoAuth); | ||
| I.amOnPage('/m/awWEFyPu/big-buck-bunny?r=dGSUzs9o&play=1'); | ||
| I.checkA11y(); |
There was a problem hiding this comment.
Amazingly no failures for the player!? Awesome!
|
@ChristiaanScheermeijer maybe we should push this through next sprint and submit it as a PR in the OSS repo. Even without e2e tests for some of the modals (there is still an open ticket for that). It is beneficial to have this in the OSS repo so nobody accidentally breaks accessibility. If @MelissaDTH is back on Monday, maybe she could finish off this PR and do some of the modals later. |
Description
With this PR, we now perform a WCAG check per page using
axe-playwright.Due to these accessibility tests, new issues have been found and fixed:
aria-rowindexandaria-colindexshould start with 1 according to the docs (docs)imgwas missing on the lock icon inVideoListItemlabelelement was missing for theSelectcomponentUpdate June 4th: Temporary wait functions are necessary (sadly)
The accessibility tests always fail on the first run, but succeed on all subsequent runs (e.g. when you locally rerun, they always pass).
It looks like we need to implement proper page load handling and find an alternative to the temporary
I.wait()in our accessibility tests . It appears that theI.waitForLoaderDone()function is not sufficient to address the issue in all tests, therefore we resorted to a wait function for now as a temporary fix (I've created a ticket for this research: OTT-1884)Update June 5th
🚧 Work in Progress: Tests still fail after implementing a wait of 2 seconds in the
checkA11yfunction. We need to further investigate and find a solution, see Slack thread for more info: Thread.Original ticket: https://videodock.atlassian.net/browse/OTT-1134
Other tickets that are solved, see userstory: OTT-1593
Solely run the a11y tests
Change codecept start script to:
Change test config to only run a11y tests:
For a more verbose output, add logging to
if (impactedViolations.length > 0)check: